<!--仓库档案选择-->
<template>
    <a-modal class="warehouse-modal-wrapper" title="仓库选择" :visible="visible" @ok="handleOk" @cancel="handleCancel" :width="800" minHeight="500" :footer="null">
        <!-- <div class="clearfix" :span="24" style="margin-bottom:10px">
            <a-row :span="24">
                <a-col :span="8">
                    <a-input placeholder="请输入仓库名称" v-model="whName"></a-input>
                </a-col>
                <a-col :span="2">
                    <a-button class="margin-left-10" @click="getData()">搜索</a-button>
                </a-col>
            </a-row>
        </div> -->
        <a-table :columns="columns" :data-source="tableData" @change="onTableChange" :customRow="customClick" :pagination="pagination" :scroll="{x:600,y:0}" bordered>
        </a-table>
    </a-modal>
</template>
<script>
import { getAction, postAction } from "@/api/manage";
const columns = [
    {
        title: "仓库编码",
        width: 70,
        dataIndex: "whCode",
    },
    { title: "仓库名称", dataIndex: "whName", width: 120 },
    {
        title: "仓库类型",
        dataIndex: "whClass",
        customRender: (text) => {
            return text == 1 ? "普通仓" : text == 2 ? "现场仓" : "委外仓";
        },
    },
    { title: "负责人", dataIndex: "whPerson" },
    { title: "手机", dataIndex: "whMobile" },
    { title: "地址", width: 200, dataIndex: "whAddress" },
    {
        title: "状态",
        dataIndex: "status",
        customRender: (text) => {
            return text == 0 ? "正常" : text == 1 ? "删除" : "停用";
        }
    }
];
export default {
    props: {
        defaultValut: { // 默认选中项
            type: String,
            default: ''
        }
    },
    data() {
        return {
            columns,
            visible: false,
            confirmLoading: false,
            tableData: [],
            selectedRowKeys: [],
            selectedRowData: [],
            wharehouseName: '',//返回给输入框的仓库名称
            whName: '',//搜索条件仓库名称
            pagination: {
                size: "small",
                current: 1,
                pageSize: 20,
                total: 0,
                showTotal: (total) => {
                    return (
                        <div>
                            共 {total} 条数据，每页
                            <a-input
                                style="height:22px !important;width:3.2rem;"
                                value={this.pagination.pageSize}
                                min={1}
                                max={500}
                                size="small"
                                onPressEnter={(e) => this.changePageSize(e)}
                            />条
                        </div>
                    );
                },
                showQuickJumper: true,
                showLessItems: true
            },
            componentName: '',//输入框字段key
            customClick: (record, index) => ({
                on: {
                    dblclick: (event) => {
                        event.preventDefault();
                        this.visible = false;
                        this.selectedRowKeys = [];
                        let array = {
                            id: record.id,
                            name: record.whName,
                            code: this.componentName
                        }
                        this.$emit('setValue', array);
                    },
                },
            }),
        };
    },
    computed: {
        rowSelection() {
            const { defaultValut } = this;
            return {
                type: 'checkbox',
                selectedRowKeys: this.selectedRowKeys,
                onChange: this.onSelectChange,
                fixed: true,
                getCheckboxProps: record => ({
                    defaultChecked: defaultValut.includes(record.whName),
                }),
            }
        }
    },
    created() {
        this.getData();
    },
    methods: {
        showModal(code) {
            this.visible = true;
            this.componentName = code;//传递的名字
        },
        handleOk(e) {
            //提交
            const { selectedRowKeys, selectedRowData } = this;
            if (selectedRowKeys.length == 0) {
                this.$message.error('请选择一个仓库');
                return false;
            } else if (selectedRowKeys.length > 1) {
                this.$message.error('只能选择一条数据');
                return false;
            } else {
                this.confirmLoading = true;
                setTimeout(() => {
                    this.visible = false;
                    this.confirmLoading = false;
                    this.selectedRowKeys = [];

                    let array = {
                        id: this.selectedRowData[0].id,
                        name: this.selectedRowData[0].whName,
                        code: this.componentName
                    }
                    this.$emit('setValue', array);
                }, 500);
            }
        },
        handleCancel(e) {
            //关闭
            this.visible = false;
        },
        getData() {
            const { pageSize, current } = this.pagination;

            let params = { size: pageSize, current: current };
            this.confirmLoading = true;
            getAction("/in/warehouse/pageList", params).then((res) => {
                if (res.code == 200) {
                    this.tableData = res.data.records;
                    this.pagination.total = res.data.total;
                } else {
                    // this.$message.warning(res.message);
                }
                this.confirmLoading = false;
            });
        },
        onSelectChange(keys, row) {
            //只能选中一个
            this.selectedRowKeys = keys;
            this.selectedRowData = row;
            console.log(keys)
        },
        changePageSize(e) {
            //改变分页大小
            console.log(e);
            const value = e.target.value;
            let size = Number.parseInt(value);
            if (!size) {
                size = 20;
            }
            if (size > 500) {
                size = 500;
            }
            const { pagination } = this;

            console.log(e, value);
            Object.assign(this.pagination, {
                current: 1,
                pageSize: size,
            });
            this.getData();
        },
        onTableChange(pagination, filters, sorter) {
            Object.assign(this.tableData, {
                current: pagination.current,
                size: pagination.pageSize
            });
            Object.assign(this.pagination, {
                current: pagination.current,
                pageSize: pagination.pageSize
            });
            this.getData();
        },
    }
};
</script>
<style lang="less">
.warehouse-modal-wrapper {
    .ant-table-tbody {
        cursor: pointer;
    }
    // .ant-table-wrapper .ant-table-placeholder {
    //     position: static !important;
    //     top: 0;
    // }
}
</style>